<template>
  <div class="detail">
    <header>
      <i class="iconfont icon-angle-left" @click="$router.go(-1)"></i>
      <h3>{{ objDetail.community }}</h3>
      <i></i>
    </header>
    <main>
      <div class="banner">
        <van-swipe
          v-if="objDetail.houseImg"
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item>
            <img :src="objDetail.houseImg[0]" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img :src="objDetail.houseImg[1]" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img :src="objDetail.houseImg[2]" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="HouseDetail_info__w_ymp">
        <h3 class="HouseDetail_infoTitle__E1ASO">{{ objDetail.title }}</h3>
        <div class="am-flexbox HouseDetail_tags__3VXf3 am-flexbox-align-center">
          <div class="am-flexbox-item">
            <span class="HouseDetail_tag__o8UuR HouseDetail_tag1__2-k0O"
              >随时看房</span
            >
          </div>
        </div>
        <div
          class="
            am-flexbox
            HouseDetail_infoPrice__3SZhW
            am-flexbox-align-center
          "
        >
          <div class="am-flexbox-item HouseDetail_infoPriceItem__Rxzot">
            <div class="item">
              {{ objDetail.price
              }}<span class="HouseDetail_month__uBAXz">/月</span>
            </div>
            <div>租金</div>
          </div>
          <div class="am-flexbox-item HouseDetail_infoPriceItem__Rxzot">
            <div class="item">{{ objDetail.roomType }}</div>
            <div>房型</div>
          </div>
          <div class="am-flexbox-item HouseDetail_infoPriceItem__Rxzot">
            <div class="item">91平米</div>
            <div>面积</div>
          </div>
        </div>
        <div class="am-flexbox-HouseDetail">
          <div class="am-flexbox-item">
            <div v-if="objDetail.tags">
              <span class="HouseDetail_title__iGpj_">装修：</span
              >{{ objDetail.tags[0] }}
            </div>
            <div>
              <span class="HouseDetail_title__iGpj_">楼层：</span
              >{{ objDetail.floor }}
            </div>
          </div>
          <div class="am-flexbox-item">
            <div v-if="objDetail.oriented">
              <span class="HouseDetail_title__iGpj_">朝向：</span
              >{{ objDetail.oriented[0] }}
            </div>
            <div>
              <span class="HouseDetail_title__iGpj_">类型：</span
              >{{ objDetail.community }}
            </div>
          </div>
        </div>
        <div class="HouseDetail_map__21q54">
          <div class="HouseDetail_mapTitle__3reEo">
            小区：<span>美林海岸花园</span>
          </div>
          <div
            class="HouseDetail_mapContainer__1a6On"
            id="map"
            style="
              overflow: hidden;
              position: relative;
              z-index: 0;
              background-color: rgb(243, 241, 236);
              color: rgb(0, 0, 0);
              text-align: left;
            "
          ></div>
        </div>
        <div class="house-pei">
          <div class="house-top">房屋配套</div>
          <div class="house-icons">
            <li v-for="(item, index) in support" ref="roomIcon" :key="index">
              <i :class="item.i"></i>{{ item.label }}
            </li>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <!-- <div class="foot-item" v-if="flag">
        <van-icon name="like" />
        <span>已收藏</span>
      </div> v-else-->
      <div class="foot-item" ref="keepAlready">
        <van-icon name="like-o" ref="vantIcons" />
        <span @click="love" ref="changeKeep">收藏</span>
      </div>

      <div class="foot-item">在线咨询</div>
      <div class="foot-item tel" @click="callPhone">电话预约</div>
      <!-- 对话框 -->
      <van-dialog
        v-model="show"
        title="提示"
        message="登录后才能收藏房源，是否去登录？"
        show-cancel-button
        cancel-button-text="取消"
        confirm-button-text="去登录"
        @confirm="goLogin"
      >
      </van-dialog>
    </footer>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      objDetail: {},
      show: false, // 是否显示对话框
      flag: false, /// 判断收藏与已收藏
      support: [
        { i: "iconfont icon-xiyiji", label: "洗衣机" },
        { i: "iconfont icon-kongtiao", label: "空调" },
        { i: "iconfont icon-bingxiang", label: "冰箱" },
        { i: "iconfont icon-dianshi", label: "电视" },
        { i: "iconfont icon-tianranqi-01", label: "天然气" },
        { i: "iconfont icon-haofangtuo400iconfont2reshuiqi", label: "热水器" },
      ],
    };
  },
  created() {
    let { id } = this.$route.params;
    console.log(this.$route, "id");
    axios.get(`/houses/${id}`).then((res) => {
      console.log(res, "详情");
      this.objDetail = res.data.body;
      console.log(this.objDetail.supporting);
    });
  },
  methods: {
    love() {
      if (!localStorage.username) {
        this.show = !this.show;
      } else {
        this.$refs.keepAlready.classList.toggle("active");
      }
      // if (!localStorage.username) {
      //   this.show = !this.show;
      // } else {
      //   this.$refs.vantIcons.style.color = "#f00";
      axios.get("/user/favorites").then((res) => {
        console.log(res, "收藏");
      });
      //   this.flag = !this.flag
      // }
    },
    /// 点击显示对话框 确定去登录
    goLogin() {
      this.$router.push("/login");
    },
    // 调用拨号功能
    callPhone(phoneNumber) {
      window.location.href = "tel://" + phoneNumber;
    },
  },
};
</script>

<style lang='scss' scoped>
.detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.1rem;
    border-bottom: 1px solid #eee;
    h3 {
      font-weight: normal;
    }
  }
  main {
    flex: 1;
    overflow-y: scroll;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 3rem;
  line-height: 150px;
  text-align: center;
  img {
    width: 100%;
    height: 3rem;
  }
}
.HouseDetail_info__w_ymp {
  padding: 15px;
  background: #fff;
}
.HouseDetail_infoTitle__E1ASO {
  font-weight: 400;
  font-size: 16px;
  color: #333;
}
.am-flexbox-item > .item {
  color: #f00;
}
.am-flexbox.am-flexbox-align-center {
  align-items: center;
}
.am-flexbox .am-flexbox-item {
  box-sizing: border-box;
  flex: 1 1;
  margin-left: 8px;
  min-width: 10px;
}
.HouseDetail_tag1__2-k0O {
  color: #39becd;
  background: #e1f5f8;
}
.HouseDetail_tag__o8UuR {
  display: inline-block;
  font-size: 12px;
  border-radius: 3px;
  padding: 4px 5px;
  margin-right: 5px;
  line-height: 12px;
  flex: auto;
}
.HouseDetail_infoPrice__3SZhW {
  border-top: 1px solid #cecece;
  border-bottom: 1px solid #cecece;
  margin: 15px 0;
  display: flex;
  padding: 15px 0;
}
.am-flexbox {
  display: flex;
}
.am-flexbox .am-flexbox-item:first-child {
  margin-left: 0;
}
.am-flexbox .am-flexbox-item {
  box-sizing: border-box;
  flex: 1 1;
  margin-left: 8px;
  min-width: 10px;
}
.am-flexbox-HouseDetail {
  width: 100%;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.HouseDetail_map__21q54 {
  width: 100%;
  height: 4rem;
  margin-top: 10px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.house-pei {
  width: 100%;
  height: 3.9rem;
  .house-top {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    border-bottom: 1px solid #eee;
  }
  .house-icons {
    width: 100%;
    height: 2.8rem;
    display: flex;
    flex-wrap: wrap;
    li {
      width: calc(100% / 4);
      flex-shrink: 0;
      text-align: center;
      font-size: 14px;
      background-color: #fff;
      i {
        display: block;
        font-size: 22px;
        margin: 4px 0;
      }
    }
  }
}
footer {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .foot-item {
    width: 33%;
    height: 1rem;
    text-align: center;
    line-height: 50px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #eee;
  }
  .tel {
    background-color: #21b97a;
    color: #fff;
  }
  .active {
    color: #f00;
  }
}
</style>